<template>
	<div class="wrap">
		<div class="left-title">
			<p>订单评价</p>
		</div>
		<!--上-->
		<div class="nanfei">
			<div class="youzi">
			<img class="putao" src="../../assets/img/geren/youzi.png"/>
			<p class="zhenxiang">珍享 南非进口红心葡萄柚 西柚柚子 </p>
			</div>
			<div class="youzi-right">
			<p class="pingfen">商品评分</p>
			<div class="hongxing">
				<xingxing></xingxing>
			</div>
			<p class="pjsp">评价商品</p>
			 <textarea class="pj" placeholder="商品评价最少10个字,最多50个字/" style="width:600px;height:200px;"></textarea>
			 <p class="shaiImg">晒图片</p>
			 <div class="add-img">
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 </div>
			</div>
		</div>
		<!--中-->
		<div class="putao-center">
			<div class="youzi">
			<img class="putao" src="../../assets/img/geren/juzi.png"/>
			<p class="zhenxiang">珍享 南非进口红心葡萄柚 西柚柚子 </p>
			</div>
			<div class="youzi-right">
			<p class="pingfen">商品评分</p>
			<div class="hongxing">
				<xingxing></xingxing>
			</div>
			<p class="pjsp">评价商品</p>
			 <textarea class="pj" placeholder="商品评价最少10个字,最多50个字/" style="width:600px;height:200px;"></textarea>
			 <p class="shaiImg">晒图片</p>
			 <div class="add-img">
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 	<img src="../../assets/img/geren/addimg.png"/>
			 </div>
			</div>
		</div>
		<!--下-->
		<div class="taidu">
			<p class="fuwutd1">服务态度</p>
			<div class="zuiping1">
				<xingxing></xingxing>
			</div>
			<p class="fuwutd2">描述相符</p>
			<div class="zuiping2">
				<xingxing></xingxing>
			</div>
			<router-link to="dingdan01"><button class="appraise">提交评价</button></router-link>
		</div>
	</div>
</template>

<script>
	import xingxing from '@/components/gerenzhongxin/xx'
	export default {
		components: {
			xingxing
		},
		methods: {
			apple:function(){
				
			}
		},
		mounted: function() {
		this.apple();
		}

	}
</script>

<style scoped="scoped">
	.wrap {
		width: 1085px;
		float: left;
		/*height: 625px;*/
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	.left-title{
		border-bottom: 1px solid #e7e7e7;
	}
	.left-title p{
		font-size: 18px;
		margin: 21px;
	}
	.nanfei,.putao-center{
		width: 100%;
		height: 363px;
		border-bottom: 1px dashed #E7E7E7;
	}
	.youzi{
		width: 281px;
		height: 363px;
		float: left;
	}
	.youzi-right{
		width: 804px;
		height: 363px;
		float: left;
	}
	.putao{
		margin-top: 27px;
		margin-left: 21px;
	}
	.zhenxiang{
		width: 250px;
		font-size: 16px;
		color: #666666;
		margin-left: 21px;
	}
	.pingfen{
		margin-top: 13px;
		margin-left: 102px;
		float: left;
		font-size: 16px;
		padding-right: 10px;
		margin-top: 10px;
	}
	.hongxing{
		margin-top: 10px;
		margin-left: 20px;
	}
	.pjsp{
		width: 64px;
		float: left;
		font-size: 16px;
		margin-left: 102px;
		margin-top: 28px;
	}
	#commodity{
		float: left;
		margin-left: 19px;
		width: 597px;
		height: 136px;
		margin-top: 28px;
		border: 1px solid #DAA520;
	}
	.pj{
		margin-top: 30px;
		margin-left: 20px;
		border:1px solid #E7E7E7;
		text-indent:0.5em ;
		font-size:16px;
	}
	.shaiImg{
		font-size:16px;
		margin-left: 102px;
		margin-top: 20px;
	}
	.add-img{
		margin-left: 182px;
		margin-left: 182px;
		margin-top: -30px;
	}
	.fuwutd1,.fuwutd2{
		font-size: 16px;
		float: left;
		margin-top: 53px;
	}
	.fuwutd1{
		margin-left: 309px;
	}
	.fuwutd2{
		margin-left: 81px;
	}
	.zuiping1,.zuiping2{
		margin-top: 51px;
		float: left;
		margin-left: 20px;
	}
	.appraise{
		width: 150px;
		height: 50px;
		background: #F08200;
		border-radius: 5px;
		font-size: 16px;
		color: white;
		margin-top: 131px;
		margin-left: -300px;
		margin-bottom: 40px;
	}
</style>